<template>
	<cl-page>
		<view class="settings-page">
			<!-- 基础设置 -->
			<view class="section">
				<text class="section-title">基础设置</text>
				<view class="setting-list">
					<view class="setting-item" @tap="toProfile">
						<view class="item-content">
							<cl-icon name="user" size="20" color="#667eea"></cl-icon>
							<text class="item-text">个人资料</text>
						</view>
						<cl-icon name="arrow-right" size="16" color="#ccc"></cl-icon>
					</view>
					<view class="setting-item" @tap="toAddressList">
						<view class="item-content">
							<cl-icon name="location" size="20" color="#667eea"></cl-icon>
							<text class="item-text">收货地址</text>
						</view>
						<cl-icon name="arrow-right" size="16" color="#ccc"></cl-icon>
					</view>
					<view class="setting-item">
						<view class="item-content">
							<cl-icon name="bell" size="20" color="#667eea"></cl-icon>
							<text class="item-text">消息推送</text>
						</view>
						<cl-switch v-model="settings.pushNotification" size="small" />
					</view>
				</view>
			</view>

			<!-- 隐私设置 -->
			<view class="section">
				<text class="section-title">隐私设置</text>
				<view class="setting-list">
					<view class="setting-item">
						<view class="item-content">
							<cl-icon name="eye" size="20" color="#667eea"></cl-icon>
							<text class="item-text">允许查看足迹</text>
						</view>
						<cl-switch v-model="settings.allowViewFootprint" size="small" />
					</view>
					<view class="setting-item">
						<view class="item-content">
							<cl-icon name="heart" size="20" color="#667eea"></cl-icon>
							<text class="item-text">允许查看收藏</text>
						</view>
						<cl-switch v-model="settings.allowViewCollect" size="small" />
					</view>
				</view>
			</view>

			<!-- 应用设置 -->
			<view class="section">
				<text class="section-title">应用设置</text>
				<view class="setting-list">
					<view class="setting-item" @tap="clearCache">
						<view class="item-content">
							<cl-icon name="delete" size="20" color="#667eea"></cl-icon>
							<text class="item-text">清除缓存</text>
						</view>
						<text class="cache-size">{{ cacheSize }}</text>
					</view>
					<view class="setting-item" @tap="checkUpdate">
						<view class="item-content">
							<cl-icon name="refresh" size="20" color="#667eea"></cl-icon>
							<text class="item-text">检查更新</text>
						</view>
						<text class="version-text">v1.0.0</text>
					</view>
				</view>
			</view>

			<!-- 帮助与支持 -->
			<view class="section">
				<text class="section-title">帮助与支持</text>
				<view class="setting-list">
					<view class="setting-item" @tap="toHelpCenter">
						<view class="item-content">
							<cl-icon name="question" size="20" color="#667eea"></cl-icon>
							<text class="item-text">帮助中心</text>
						</view>
						<cl-icon name="arrow-right" size="16" color="#ccc"></cl-icon>
					</view>
					<view class="setting-item" @tap="contactService">
						<view class="item-content">
							<cl-icon name="service" size="20" color="#667eea"></cl-icon>
							<text class="item-text">联系客服</text>
						</view>
						<cl-icon name="arrow-right" size="16" color="#ccc"></cl-icon>
					</view>
					<view class="setting-item" @tap="toAbout">
						<view class="item-content">
							<cl-icon name="info" size="20" color="#667eea"></cl-icon>
							<text class="item-text">关于我们</text>
						</view>
						<cl-icon name="arrow-right" size="16" color="#ccc"></cl-icon>
					</view>
				</view>
			</view>

			<!-- 退出登录 -->
			<view class="logout-section">
				<cl-button type="danger" size="large" @tap="logout"> 退出登录</cl-button>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useCool } from "/@/cool";
import { useStore } from "/@/cool/store";

const { router } = useCool();
const { user } = useStore();

// 设置项
const settings = reactive({
	pushNotification: true,
	allowViewFootprint: true,
	allowViewCollect: false,
});

const cacheSize = ref("23.5MB");

// 跳转个人资料
function toProfile() {
	router.push("/pages/user/profile");
}

// 跳转地址列表
function toAddressList() {
	router.push("/pages/user/address-list");
}

// 跳转帮助中心
function toHelpCenter() {
	router.push("/pages/user/help-center");
}

// 跳转关于我们
function toAbout() {
	router.push("/pages/user/about");
}

// 清除缓存
function clearCache() {
	uni.showModal({
		title: "提示",
		content: "确定要清除缓存吗？",
		success: (res) => {
			if (res.confirm) {
				uni.showLoading({ title: "清除中..." });
				setTimeout(() => {
					uni.hideLoading();
					cacheSize.value = "0MB";
					uni.showToast({ title: "清除成功", icon: "success" });
				}, 1000);
			}
		},
	});
}

// 检查更新
function checkUpdate() {
	uni.showLoading({ title: "检查中..." });
	setTimeout(() => {
		uni.hideLoading();
		uni.showToast({ title: "已是最新版本", icon: "success" });
	}, 1000);
}

// 联系客服
function contactService() {
	uni.makePhoneCall({
		phoneNumber: "400-888-9999",
	});
}

// 退出登录
function logout() {
	uni.showModal({
		title: "提示",
		content: "确定要退出登录吗？",
		success: (res) => {
			if (res.confirm) {
				// 使用store的logout方法，完整清理所有数据
				user.logout();
				uni.showToast({ title: "已退出登录", icon: "success" });
			}
		},
	});
}
</script>

<style lang="scss" scoped>
.settings-page {
	background-color: #f8f9fa;
	min-height: 100vh;
	padding-bottom: 40rpx;
}

.section {
	margin: 32rpx 32rpx 0;

	&:first-child {
		margin-top: 20rpx;
	}
}

.section-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 16rpx;
	display: block;
}

.setting-list {
	background-color: #ffffff;
	border-radius: 16rpx;
	overflow: hidden;
}

.setting-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx 24rpx;
	border-bottom: 1rpx solid #f5f5f5;
	transition: all 0.3s ease;

	&:last-child {
		border-bottom: none;
	}

	&:active {
		background-color: #f8f9ff;
	}
}

.item-content {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.item-text {
	font-size: 28rpx;
	color: #1a1a1a;
}

.cache-size,
.version-text {
	font-size: 24rpx;
	color: #999;
}

.logout-section {
	margin: 64rpx 32rpx 0;
}
</style>
